/**
* @Author: zmx
* @Date: 2023/9/25
* @Description:
*/
<template>
  <div style="padding: 20px">
    <el-form :inline="true" :model="formInline" label-width="100px">
      <el-form-item label="市选择：">
        <el-select
          v-model="formInline.cityId"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
          @change="getCity"
        >
          <el-option
            v-for="item in optionsListCity"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="区选择：">
        <el-select
          v-model="formInline.districtId"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
          @change="getDist"
        >
          <el-option
            v-for="item in optionsListDist"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="站选择：">
        <el-select
          v-model="formInline.stationId"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in selectItemType"
            :key="item.id"
            :label="item.staName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="损耗排序：">
        <el-select
          v-model="formInline.lossSort"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in loss"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="统计方式：">
        <el-select
          v-model="type"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in dataType"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="年：" v-if="type===0">
        <el-select
          v-model="formInline.year"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in year"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="月：" v-if="type===0">
        <el-select
          v-model="formInline.month"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in month"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="日：" v-if="type===1">
      <el-date-picker
        v-model="formInline.statDate"
        type="datetimerange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 517px">
      </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="reset">清空</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#006175',color:'#fff'}">
      <el-table-column label="序号" width="50">
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <!--      <el-table-column prop="stationId" label="充电站ID"></el-table-column>-->
      <el-table-column prop="stationName" label="充电站名称" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="cityName" label="所在市"></el-table-column>
      <el-table-column prop="districtName" label="所在区"></el-table-column>
      <el-table-column prop="dayLoseValue" label="充电站损耗(昨日)">
        <template v-slot="{row}">
          {{ row.dayLoseValue }}kw.h
        </template>
      </el-table-column>
      <el-table-column prop="monthLoseValue" label="充电站损耗(当月)">
        <template v-slot="{row}">
          {{ row.monthLoseValue }}kw.h
        </template>
      </el-table-column>
      <el-table-column prop="monthLossPercent" label="损耗百分比(当月)">
        <template v-slot="{row}">
          {{ (row.monthLossPercent * 100).toFixed(2) }}%
        </template>
      </el-table-column>
      <el-table-column prop="statDate" label="统计日期"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间"></el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :page-size="pagination.pageSize"
      layout="total, sizes, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>
  </div>
</template>

<script>
import {warn, plan} from "../../api/inspection/apiUntil";
import {stationLoss, stationLossMonth} from "../../api/inspection/plan";

export default {
  data() {
    return {
      month: [],
      year: [],
      optionsListCity: [],
      optionsListDist: [],
      option: [],
      tableData: [],
      tableDataExpansion: [],
      DialogComponentShow: false,
      row: '',
      dataType: [
        {
          value: 1,
          name: '日'
        },
        {
          value: 0,
          name: '月'
        }
      ],
      titlePatrol: '',
      selectItemType: [],
      warnSource: [
        {
          name: '风险评估',
          value: '1'
        },
        {
          name: '远程巡检',
          value: '2'
        },
        {
          name: '故障诊断',
          value: '3'
        }
      ],
      warnLevel: [
        {
          name: '等级1',
          value: '1'
        },
        {
          name: '等级2',
          value: '2'
        },
        {
          name: '等级3',
          value: '3'
        },
        {
          name: '等级4',
          value: '4'
        },
        {
          name: '等级5',
          value: '5'
        },
      ],
      formInline: {
        stationId: '',
        statDate: '',
        cityId: '',
        districtId: '',
        lossSort: '',
        year:'',
        month:'',
      },
      type: 0,
      loss: [
        {
          name: '降',
          value: 1
        },
        {
          name: '升',
          value: 2
        },
      ],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
    };
  },
  mounted() {
    this.getInit()
    this.getPlanCity()
    this.getDateList()
  },

  watch: {
    'formInline.cityId': function (newData, oldData) {
      if (newData != oldData) {
        this.formInline.districtId = ''
        this.formInline.stationId = ''
      }
    },
    'formInline.districtId': function (newData, oldData) {
      if (newData != oldData) {
        this.formInline.stationId = ''
      }
    }
  },

  methods: {
    getDateList() {
      const currentYear = new Date().getFullYear();
      this.year = [];
      for (let i = 0; i < 100; i++) {
        this.year.push({
          value: currentYear - i + 50,
          label: currentYear - i + 50 + '年'
        });
      }
      this.month = [];
      for (let i = 1; i <= 12; i++) {
        this.month.push({
          value: i,
          label: i + '月'
        });
      }
    },
    //城市列表
    getPlanCity() {
      plan.getPlanCity().then((res) => {
        this.optionsListCity = res.data
      })
    },
    getCity(e) {
      this.optionsListDist = []
      if (e) {
        this.optionsListCity.forEach((item) => {
          if (item.id === e) {
            this.optionsListDist = item.children
          }
        })
      } else {
        this.formInline.districtId = ''
      }
    },
    getDist(e) {
      if (e) {
        this.getPlanStat()
      } else {
        this.formInline.stationId = ''
      }
    },
    //站
    getPlanStat() {
      let params = {
        id: this.formInline.districtId
      }
      plan.getPlanStat(params).then((res) => {
        this.selectItemType = res.data
      })
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getInit()
    },
    handleCurrentChange(val) {
      this.pagination.pageNum = val
      this.getInit()
    },
    getEditor(row) {
      this.DialogComponentShow = true
      this.row = row
    },
    //关闭弹框
    closeDialog() {
      this.DialogComponentShow = false
      this.getInit()
    },
    //列表
    getInit() {
      let params = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        beginDate:this.formInline.statDate[0],
        endDate:this.formInline.statDate[1],
        ...this.formInline
      }
      let { statDate, ..._params } = params;
      if (this.type === 1) {
        // 日查询
        warn.stationLoss(_params).then((res) => {
          if (res) {
            this.tableData = res.list
            this.pagination.total = res.total
          }
        })
      } else {
        let {beginDate,endDate,...paramsM} = _params
        plan.stationLossMonth(paramsM).then((res) => {
          if (res) {
            this.tableData = res.list
            this.pagination.total = res.total
          }
        })
      }
    },
    onSubmit() {
      this.getInit()
    },
    //手动清空
    reset() {
      this.formInline.stationId = ''
      this.formInline.lossSort = ''
      this.formInline.statDate = ''
      this.formInline.cityId = ''
      this.formInline.districtId = ''
      this.formInline.year = undefined
      this.formInline.month = undefined
      this.getInit()
    },
  },
};

</script>

<style scoped>

</style>
